<template>
  <div class="relative_height">
    <Navbar :isRegister="true" :indexWidth="true"  :isBack="true"/>
    <div class="info indexWidth">
      <div class="progress u-flex u-row-between">
        <div
          class="pro_item u-flex"
          :class="{ active: progressIndex < index }"
          v-for="(item, index) in progressList"
          :key="item"
        >
          <div class="pro_num u-flex-center">
            {{ index + 1 }}
          </div>
          {{ item.name }}
          <div class="pro_line" v-if="index < progressList.length - 1"></div>
        </div>
      </div>
      <!-- 第一步-登入信息 -->
      <div class="form" v-if="progressIndex === 0">
        <el-form
          :model="ruleForm"
          :hide-required-asterisk="true"
          :rules="rules"
          ref="formRef"
          label-position="top"
        >
          <el-form-item label="登录账号" prop="user_name" class="custom-label">
            <el-input class="custom-input" v-model="ruleForm.user_name" placeholder="请输入手机号">
            </el-input>
          </el-form-item>
          <el-form-item label="身份" prop="user_type" class="custom-label" v-if="type == 2">
            <el-radio-group v-model="ruleForm.user_type" class="custom-radio-group">
              <el-radio :label="10" class="custom-radio">学生</el-radio>
              <el-radio :label="20" class="custom-radio">社会从业者</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="设定密码" prop="password" class="custom-label">
            <el-input :type="passwordType" v-model="ruleForm.password" placeholder="请输入登录密码">
              <template #suffix>
                <img
                  src="../../image/login/eyeB.png"
                  @click="eyeClick"
                  v-if="passwordType === 'password'"
                  class="eye-icon hand"
                />
                <img
                  src="../../image/login/eye.png"
                  v-else
                  @click="eyeClick"
                  class="eye-icon hand"
                />
              </template>
            </el-input>
            <div class="form-tip">密码长度该为8-16个字母，并且组合如下：字母，数字</div>
          </el-form-item>
          <el-form-item label="确认密码" prop="againPassword" class="custom-label">
            <el-input
              :type="passwordType2"
              v-model="ruleForm.againPassword"
              placeholder="请确认密码"
            >
              <template #suffix>
                <img
                  src="../../image/login/eyeB.png"
                  @click="eyeClick2"
                  v-if="passwordType2 === 'password'"
                  class="eye-icon hand"
                />
                <img
                  src="../../image/login/eye.png"
                  v-else
                  @click="eyeClick2"
                  class="eye-icon hand"
                />
              </template>
            </el-input>
          </el-form-item>
        </el-form>
        <div class="next_btn u-flex-center hand" @click="oneStep">下一步</div>
      </div>
      <!-- 第二步-基本信息() -->
      <div class="form" v-if="progressIndex === 1">
        <el-form
          :model="basicForm"
          :hide-required-asterisk="true"
          :rules="basicRules"
          ref="basicRef"
          label-position="top"
        >
        <!-- 供应商 -->
        <div v-if="type == 1">
          <el-form-item label="业务人员姓名：" prop="name" class="custom-label">
            <el-input class="custom-input" v-model="basicForm.name" placeholder="请输入业务人员姓名">
            </el-input>
          </el-form-item>
          <el-form-item label="业务联系人手机号：" prop="mobile" class="custom-label">
            <el-input
              class="custom-input"
              v-model="basicForm.mobile"
              placeholder="请输入公司联系电话"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="企业名称：" prop="company_name" class="custom-label">
            <el-input
              class="custom-input"
              v-model="basicForm.company_name"
              placeholder="请输入企业名称"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="企业办公地址：" prop="address" class="custom-label">
            <el-input
              class="custom-input"
              v-model="basicForm.address"
              placeholder="请输入企业办公地址"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="营业执照：" prop="license_image_id">
              <div class="avatar_uploader bor_none" v-if="licenseImg">
                <img :src="licenseImg" class="card_img" />
                  <img src="../../image/login/cha.png" class="card_icon hand" @click="delateClick(3)"></img>
              </div>
            <el-upload
            v-else
              class="avatar_uploader hand"
              :action="apiUrl"
              :show-file-list="false"
              :data="uploadData"
              :on-success="
                (res, file) => {
                  handleAvatarSuccess(3, res)
                }
              "
              :before-upload="
                file => {
                  beforeAvatarUpload(file)
                }
              "
            >
              <div class="avatar_uploader bor_none">
                <div class="img"></div>
                <div class="text">营业执照上传</div>
              </div>
            </el-upload>
          </el-form-item>
           <el-form-item
            label="组织机构代码："
            prop="organizing_code"
            class="custom-label"
          >
            <el-input
              class="custom-input"
              v-model="basicForm.organizing_code"
              placeholder="请输入组织机构代码"
            >
            </el-input>
          </el-form-item>
        </div>
        <!-- 采购商 -->
        <div v-if="type == 2">
          <el-form-item label="姓名：" prop="name" class="custom-label">
            <el-input class="custom-input" v-model="basicForm.name" placeholder="请输入姓名">
            </el-input>
          </el-form-item>
          <el-form-item label="身份证号" prop="card" class="custom-label">
            <el-input
              class="custom-input"
              v-model="basicForm.card"
              placeholder="请输入身份证号"
            >
            </el-input>
          </el-form-item>
          <div class="card_wrap u-flex u-row-between">
            <el-form-item label="法人身份证:" prop="card_image_id">
              <div class="avatar_uploader" v-if="cardImg1">
                  <img :src="cardImg1" class="card_img" />
                  <img src="../../image/login/cha.png" class="card_icon hand" @click="delateClick(1)"></img>
              </div>
              <el-upload
              v-else
                class="avatar_uploader hand"
                :action="apiUrl"
                :show-file-list="false"
                :data="uploadData"
                :on-success="
                  (res, file) => {
                    handleAvatarSuccess(1, res)
                  }
                "
                :before-upload="
                  file => {
                    beforeAvatarUpload(file)
                  }
                "
              >
                <div class="avatar_uploader bor_none">
                  <div class="img"></div>
                  <div class="text">身份证人像面上传</div>
                </div>
              </el-upload>
            </el-form-item>
            <el-form-item label="" prop="card_image2_id">
              <div class="avatar_uploader mt_10" v-if="cardImg2">
                  <img :src="cardImg2" class="card_img" />
                  <img src="../../image/login/cha.png" class="card_icon hand" @click="delateClick(2)"></img>
              </div>
              <el-upload
              v-else
                class="avatar_uploader mt_10 hand"
                :action="apiUrl"
                :show-file-list="false"
                :data="uploadData"
                :on-success="
                  (res, file) => {
                    handleAvatarSuccess(2, res)
                  }
                "
                :before-upload="
                  file => {
                    beforeAvatarUpload(file)
                  }
                "
              >
                <div class="avatar_uploader bor_none">
                  <div class="img"></div>
                  <div class="text">身份证国徽面上传</div>
                </div>
              </el-upload>
            </el-form-item>
          </div>
           <el-form-item label="联系人手机号：" prop="mobile" class="custom-label">
            <el-input
              class="custom-input"
              v-model="basicForm.mobile"
              placeholder="请输入联系电话"
            >
            </el-input>
          </el-form-item>
        </div>
        </el-form>
        <div class="next_btn u-flex-center hand" @click="twoStep">提交</div>
      </div>
      <!-- 第三步-验证 -->
      <div class="examine" v-if="progressIndex === 2">
        <img src="../../image/login/examine.png" class="img1" />
        <div class="exa_tit">审核中</div>
        <div class="exa_tip">资质审核预计需要1-3个工作日，请耐心等待</div>
        <div class="exa_btn hand u-flex-center" @click="threeStep">下一步</div>
      </div>
      <!-- 第三步-验证 -->
      <div class="examine" v-if="progressIndex === 3">
        <img src="../../image/login/complete.png" class="img2" />
        <div class="exa_tit">注册完成</div>
        <div class="exa_tip">提交后直接登录，不必重复提交</div>
        <div class="exa_btn hand u-flex-center" @click="fourStep">立即登录</div>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { useStore } from 'vuex'
  import { useRouter, useRoute } from 'vue-router'
  import { ref, onMounted, watch, computed, getCurrentInstance, reactive } from 'vue'
  import { ElMessage, ElNotification } from 'element-plus'
  const appContext = getCurrentInstance().appContext
  const imgUrl = appContext.config.globalProperties.$imgUrl
  const apiUrl = appContext.config.globalProperties.$apiUrl
  const store = useStore()
  const router = useRouter()
  const route = useRoute()

  // 1供应商  2采购商(店家)
  const type = ref(route.query.type)

  // 进度条
  const progressList = [
    { name: '登入信息' },
    { name: '基本信息' },
    { name: '验证' },
    { name: '完成' },
  ]
  // 进度条位置
  const progressIndex = ref(0)
  // 店铺id
  const store_id = ref(null)

  // 上传图片
  const uploadData = ref({
    checkLogin: 0,
    storeUserId: 0,
  })

  // 第一步-登入信息
  const formRef = ref(null)
  const passwordType = ref('password')
  const passwordType2 = ref('password')
  const ruleForm = reactive({
    user_name: null,
    password: null,
    againPassword: null,
    user_type: 10,
  })
  // 自定义验证函数
  const validateAgainPassword = (rule, value, callback) => {
    if (value === '') {
      callback(new Error('请确认密码'))
    } else if (value !== ruleForm.password) {
      callback(new Error('两次密码输入不一致'))
    } else {
      callback()
    }
  }

  const rules = reactive({
    user_name: [
      { required: true, message: '请输入手机号', trigger: 'blur' },
      { pattern: /^1[3-9]\d{9}$/, message: '联系电话格式错误', trigger: 'blur' },
      { min: 11, max: 11, message: '联系电话长度11个字符', trigger: 'blur' },
    ],
    password: [
      { required: true, message: '请输入登录密码', trigger: 'blur' },
      {
        min: 6,
        max: 20,
        message: '密码长度该为8-16个字母，并且组合如下：字母，数字',
        trigger: ['blur', 'change'],
      },
      {
        pattern: /^(?=.*[0-9].*)(?=.*[A-Z].*)(?=.*[a-z].*).+$/,
        message: '密码是由大小写字母，数字组成',
        trigger: ['blur', 'change'],
      },
    ],
    againPassword: [
      { required: true, message: '请确认密码', trigger: 'blur' },
      { validator: validateAgainPassword, trigger: ['blur', 'change'] },
    ],
    user_type: [
      { required: true, message: '请选择身份', trigger: 'change' },
    ],
  })
  // 第二步-基本信息
  const basicRef = ref(null)
  const basicForm = reactive({
    name: null,
    card: null,
    card_image_id: null,
    card_image2_id: null,
    mobile: null,
    address: null,
    company_name:null,
    license_image_id: null,
    organizing_code: null,
  })
  const basicRules = reactive({
    name: [{ required: true, message: '请输入法人姓名', trigger:  'blur' },{ min: 2,  message: '法人姓名最少2个字符', trigger:  'blur' },],
    card: [
      { required: true, message: '请输入法人身份证号', trigger:  'blur' },
      { min: 18, max: 18, message: '身份证长度18位', trigger:  'blur' },
      {
        pattern: /^[1-9]\d{5}(19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[Xx\d]$/,
        message: '身份证号格式不正确',
        trigger:  'blur',
      },
    ],
    card_image_id: [{ required: true, message: '请上传身份证人像面', trigger:  'blur' }],
    card_image2_id: [{ required: true, message: '请上传身份证国徽面', trigger:  'blur' }],
    mobile: [
      { required: true, message: '请输入公司联系电话', trigger:  'blur' },
      { pattern: /^1[3-9]\d{9}$/, message: '联系电话格式错误', trigger:  'blur' },
      { min: 11, max: 11, message: '联系电话长度11个字符', trigger:  'blur' },
    ],
    address: [{ required: true, message: '请输入企业办公地址', trigger:  'blur' },
      { min: 5,  message: '企业办公地址最少5个字符', trigger:  'blur' },
    ],
    company_name: [{ required: true, message: '请输入企业名称', trigger:  'blur' },
      { min: 3,  message: '企业名称最少3个字符', trigger:  'blur' },
    ],
    license_image_id: [{ required: true, message: '请上传营业执照', trigger:  'blur' }],
    organizing_code: [
      { required: true, message: '请输入组织机构代码', trigger:  'blur' },
      { min: 18, max: 18, message: '统一社会信用代码长度 18 个字符', trigger:  'blur' },
    ],
  })
  const cardImg1 = ref(null)
  const cardImg2 = ref(null)
  const licenseImg = ref(null)

  // 监听密码变化，实时验证确认密码
  watch(
    () => ruleForm.password,
    newVal => {
      if (ruleForm.againPassword && newVal !== ruleForm.againPassword) {
        setTimeout(() => {
          formRef.value?.validateField('againPassword')
        }, 0)
      }
    }
  )

  // 监听确认密码变化
  watch(
    () => ruleForm.againPassword,
    newVal => {
      if (newVal && ruleForm.password && newVal !== ruleForm.password) {
        setTimeout(() => {
          formRef.value?.validateField('againPassword')
        }, 0)
      }
    }
  )

  onMounted(() => {
    scrollToTop()
  })
  const scrollToTop = () => {
    window.scrollTo({
      top: 0,
    })
    // store.dispatch("home/articleApi").then(res => {
    //     if (res.status == 200) {
    //         console.log("??")
    //     }
    // });
  }

  const eyeClick = () => {
    passwordType.value = passwordType.value === 'password' ? 'text' : 'password'
  }

  const eyeClick2 = () => {
    passwordType2.value = passwordType2.value === 'password' ? 'text' : 'password'
  }

  // 判断图片是否符合规格
  const beforeAvatarUpload = file => {
    let isJPG = file.type === 'image/jpeg'
    let isPNG = file.type === 'image/png'
    let isLt5M = file.size / 1024 / 1024 < 5

    console.log(isJPG, isPNG, isLt5M, file.size / 1024 / 1024, '判断')
    if (!isJPG && !isPNG) {
      ElMessage.error('只能上传 JPG/PNG 格式的图片!')
      return false
    }

    if (!isLt5M) {
      ElMessage.error('上传图片大小不能超过 5MB!')
      return false
    }

    return (isPNG || isJPG) && isLt5M
  }

  // 成功获取图片
  const handleAvatarSuccess = (type, res) => {
    console.log(res, '成功')

    let preview_url = res.data.fileInfo.preview_url
    let file_id = res.data.fileInfo.file_id

    if (type == 1) {
      //身份证正面
      cardImg1.value = preview_url
      basicForm.card_image_id = file_id
    } else if (type == 2) {
      //身份证反面
      cardImg2.value = preview_url
      basicForm.card_image2_id = file_id
    } else if (type == 3) {
      //营业执照
      licenseImg.value = preview_url
      basicForm.license_image_id = file_id
    }
  }

  // 删除图片
  const delateClick = (type) => {
    if (type == 1) {
      cardImg1.value = null
      basicForm.card_image_id = null
    } else if (type == 2) {
      cardImg2.value = null
      basicForm.card_image2_id = null
    } else if (type == 3) {
      licenseImg.value = null
      basicForm.license_image_id = null
    }
  }

  // 第一步-登入信息
  const oneStep = () => {
    formRef.value.validate(valid => {
      if (valid) {
        store
          .dispatch('home/checkUserApi', {
            user_name: ruleForm.user_name,
            password: ruleForm.password,
            user_type: ruleForm.user_type,
            is_super: type.value == 1 ? 0 : 2,
          })
          .then(res => {
            if (res.status == 200) {
            store_id.value = res.data.result
            uploadData.value.storeUserId = store_id.value//上传图片用
            basicForm.store_user_id = store_id.value//上传资质用
            
            progressIndex.value = 1
            } else {
              ElNotification({
                title: '失败',
                message: res.message,
                type: 'error',
                duration: 2000,
              })
            }
          })
      } else {
        return false
      }
    })
  }

  // 第二步-基本信息
  const twoStep = () => {
    basicRef.value.validate(valid => {
      if (valid) {
        let api = type.value == 1 ? 'home/certificationGongApi' : 'home/certificationCaiApi'
        store
          .dispatch(api, deepRemoveNull(basicForm))
          .then(res => {
            if (res.status == 200) {
              progressIndex.value = 2
            } else {
              ElNotification({
                title: '失败',
                message: res.message,
                type: 'error',
                duration: 2000,
              })
            }
          })
      }
    })
  }

  // 第三步-验证
  const threeStep = () => {
    progressIndex.value = 3
  }

  // 第四步-完成
  const fourStep = () => {
    router.push('/login')
  }

  const deepRemoveNull = (obj) => {
  if (typeof obj !== 'object' || obj === null) return obj;
  
  return Object.entries(obj).reduce((acc, [key, value]) => {
    const cleanedValue = deepRemoveNull(value);
    if (cleanedValue !== null) {
      acc[key] = cleanedValue;
    }
    return acc;
  }, {});
}
</script>

<style scoped lang="less">
  // 兼容
  @media screen and (max-width: 1920px) {
    // label文字
    :deep(.el-form-item__label) {
      font-size: 14px !important;
    }
    // 输入外框
    :deep(.el-input__wrapper) {
      height: 45px !important;
      border-radius: 10px !important;
    }
    // 输入框文字
    :deep(.el-input__inner) {
      font-size: 14px !important;
    }
    // 红色提示文字
    :deep(.el-form-item__error) {
      margin-top: 2px !important;
    }

    .relative_height {
      padding: 20px 0 60px 0 !important;

      .info {
        min-height: 80vh !important;
        padding: 80px 280px 0 !important;

        .progress {
          .pro_item {
            font-size: 16px !important;
            .pro_num {
              width: 23px !important;
              height: 23px !important;
              font-size: 13px !important;
              margin-right: 8px !important;
            }

            .pro_line {
              width: 105px !important;
            }
          }
        }

        .form {
          padding: 60px 100px 75px !important;

          .custom-label {
            margin-bottom: 23px !important;
          }

          .eye-icon {
            width: 24px !important;
          }

          /* 默认提示文字样式 */
          .form-tip {
            font-size: 13px !important;
            padding: 1px 0 0 10px !important;
          }

          // 单选框样式适配 - 基于purchaser.vue样式
          :deep(.custom-radio-group) {
            gap: 20px !important;
          }
          
          :deep(.custom-radio .el-radio__label) {
            font-size: 14px !important;
          }
          
          :deep(.custom-radio .el-radio__input .el-radio__inner) {
            width: 16px !important;
            height: 16px !important;
          }
          
          :deep(.custom-radio .el-radio__input.is-checked .el-radio__inner::after) {
            width: 5px !important;
            height: 5px !important;
          }

          .card_wrap {
            margin-bottom: 8px !important;
          }

          .avatar_uploader {
            width: 250px !important;

            .img {
              width: 40px !important;
            }

            .text {
              font-size: 13px !important;
            }

            
            .card_icon {
              width: 18px !important;
              top: 8px !important;
              right: 8px !important;
            }
          }
        }

        .examine {
          padding: 160px 0px 0px !important;

          .img1 {
            width: 100px !important;
          }

          .img2 {
            width: 65px !important;
          }

          .exa_tit {
            font-size: 19px !important;
            margin: 30px 0 13px !important;
          }

          .exa_tip {
            font-size: 14px !important;
          }

          .exa_btn {
            width: 180px !important;
            aspect-ratio: 16/4.1;
            margin-top: 25px !important;
            font-size: 14px !important;
          }
        }

        .next_btn {
          height: 45px !important;
          font-size: 14px !important;
          border-radius: 10px !important;
          margin-top: 27px !important;
        }
      }
    }
  }

  @media screen and (max-width: 1700px) {
    // label文字
    :deep(.el-form-item__label) {
      font-size: 12px !important;
      margin-bottom: 6px !important;
    }
    // 输入外框
    :deep(.el-input__wrapper) {
      height: 35px !important;
      border-radius: 6px !important;
    }
    // 输入框文字
    :deep(.el-input__inner) {
      font-size: 12px !important;
    }

    .relative_height {
      .info {
        padding: 70px 240px 0 !important;

        .progress {
          .pro_item {
            font-size: 14px !important;
            .pro_num {
              width: 18px !important;
              height: 18px !important;
              font-size: 12px !important;
              margin-right: 6px !important;
            }

            .pro_line {
              width: 90px !important;
            }
          }
        }

        .form {
          .custom-label {
            margin-bottom: 20px !important;
          }

          .eye-icon {
            width: 20px !important;
          }

          /* 默认提示文字样式 */
          .form-tip {
            font-size: 11px !important;
            padding: 0px 0 0 8px !important;
          }

          // 单选框样式适配 - 基于purchaser.vue样式
          :deep(.custom-radio-group) {
            gap: 15px !important;
          }
          
          :deep(.custom-radio .el-radio__label) {
            font-size: 12px !important;
          }
          
          :deep(.custom-radio .el-radio__input .el-radio__inner) {
            width: 14px !important;
            height: 14px !important;
          }
          
          :deep(.custom-radio .el-radio__input.is-checked .el-radio__inner::after) {
            width: 4px !important;
            height: 4px !important;
          }

          .card_wrap {
            margin-bottom: 8px !important;
          }

          .avatar_uploader {
            width: 200px !important;
            border-radius: 6px !important;

            .img {
              width: 30px !important;
            }

            .text {
              font-size: 11px !important;
              line-height: 1 !important;
            }

            .card_icon {
              width: 16px !important;
              top: 6px !important;
              right: 6px !important;
            }
          }

          .mt_10 {
            margin-top: 27px !important;
          }
        }

        .examine {
          padding: 130px 0px 0px !important;

          .img1 {
            width: 80px !important;
          }

          .img2 {
            width: 55px !important;
          }

          .exa_tit {
            font-size: 17px !important;
            margin: 20px 0 12px !important;
          }

          .exa_tip {
            font-size: 12px !important;
          }

          .exa_btn {
            width: 160px !important;
            margin-top: 25px !important;
            font-size: 13px !important;
            border-radius: 8px !important;
          }
        }

        .next_btn {
          height: 35px !important;
          font-size: 12px !important;
          border-radius: 6px !important;
          margin-top: 27px !important;
        }
      }
    }
  }

  @media screen and (max-width: 1500px) {
    .relative_height {
      padding: 15px 0 50px 0 !important;

      .info {
        padding: 60px 200px 0 !important;

        .progress {
          .pro_item {
            .pro_line {
              margin-left: 13px !important;
            }
          }
        }

        .form {
          padding: 50px 100px 55px !important;

          .card_wrap {
            margin-bottom: 5px !important;
          }

          // 单选框样式适配 - 基于purchaser.vue样式
          :deep(.custom-radio-group) {
            gap: 12px !important;
          }
          
          :deep(.custom-radio .el-radio__label) {
            font-size: 11px !important;
          }
          
          :deep(.custom-radio .el-radio__input .el-radio__inner) {
            width: 12px !important;
            height: 12px !important;
          }
          
          :deep(.custom-radio .el-radio__input.is-checked .el-radio__inner::after) {
            width: 3px !important;
            height: 3px !important;
          }

          .avatar_uploader {
            width: 190px !important;

            .img {
              width: 25px !important;
            }

            .text {
              font-size: 10px !important;
            }
          }
        }

        .examine {
          padding: 120px 0px 0px !important;

          .img1 {
            width: 70px !important;
          }

          .img2 {
            width: 45px !important;
          }

          .exa_tit {
            font-size: 16px !important;
          }

          .exa_tip {
            font-size: 11px !important;
          }

          .exa_btn {
            width: 145px !important;
            margin-top: 25px !important;
            font-size: 12px !important;
            border-radius: 6px !important;
          }
        }
      }
    }
  }

  .relative_height {
    background: #f5f6fa;
    padding: 30px 0 80px 0;

    .info {
      min-height: 85vh;
      background: #fff;
      padding: 96px 400px 0;

      .progress {
        .pro_item {
          font-size: 18px;
          &.active {
            color: rgba(61, 61, 61, 0.5);
            .pro_num {
              background: rgba(84, 99, 255, 0.28);
            }
          }

          .pro_num {
            width: 25px;
            height: 25px;
            color: #fff;
            font-size: 14px;
            border-radius: 50%;
            background: #5463ff;
            margin-right: 10px;
          }

          .pro_line {
            width: 120px;
            height: 1px;
            background: #d8d8d8;
            margin-left: 15px;
          }
        }
      }

      .form {
        padding: 76px 110px 85px;
        box-sizing: border-box;

        .custom-label {
          margin-bottom: 25px;
        }

        .eye-icon {
          width: 27px;
          height: auto;
        }

        /* 默认提示文字样式 */
        .form-tip {
          color: #999;
          font-size: 14px;
          padding: 2px 0 0 10px;
        }

        .card_wrap {
          margin-bottom: 10px;
        }

        .avatar_uploader {
          width: 280px;
          aspect-ratio: 16/9;

          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          border-radius: 10px;
          border: 1px solid #dcdfe6;
          cursor: pointer;
          overflow: hidden;
          position: relative;

          &:hover {
            border-color: #5463ff;
            box-shadow: 0 2px 8px rgba(84, 99, 255, 0.1);

            .img {
              background: url('../../image/login/plus-blue.png') no-repeat center center;
              background-size: 100% 100%;
            }

            .text {
              color: #5463ff;
            }
          }

          .bor_none {
            border: none !important;
          }

          .img {
            width: 50px;
            aspect-ratio: 1/1;
            margin-bottom: 10px;
            background: url('../../image/login/plus-grey.png') no-repeat center center;
            background-size: 100% 100%;
          }

          .text {
            font-size: 16px;
            color: #999;
            text-align: center;
            line-height: 1.4;
          }

          .card_img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }

          .card_icon {
            width: 20px;
            position: absolute;
            top: 10px;
            right: 10px;
          }
        }

        .mt_10 {
          margin-top: 30px;
        }
      }

      .examine {
        text-align: center;
        padding: 225px 0px 0px;
        box-sizing: border-box;

        .img1 {
          width: 110px;
          height: auto;
        }

        .img2 {
          width: 72px;
          height: auto;
        }

        .exa_tit {
          font-size: 20px;
          color: #333;
          font-weight: bold;
          margin: 34px 0 16px;
        }

        .exa_tip {
          font-size: 16px;
          color: rgba(51, 51, 51, 0.6);
        }

        .exa_btn {
          width: 193px;
          aspect-ratio: 16/4.1;
          margin: 0px auto;
          margin-top: 28px;
          color: #fff;
          font-size: 16px;
          border-radius: 10px;
          background: #5463ff;
        }
      }

      .next_btn {
        width: 100%;
        height: 53px;
        color: #fff;
        font-size: 16px;
        border-radius: 13px;
        background: #5463ff;
        margin-top: 30px;
      }
    }
  }
  // label文字
  :deep(.el-form-item__label) {
    font-size: 16px;
    color: #333;
    margin-bottom: 11px;
  }
  // 输入外框
  :deep(.el-input__wrapper) {
    height: 53px;
    border-radius: 13px;
  }
  // 输入框文字
  :deep(.el-input__inner) {
    color: #202020;
    font-size: 16px;
  }
  // 红色提示文字
  :deep(.el-form-item__error) {
    margin-top: 3px;
  }
  // 输入框聚焦时蓝色边框
  :deep(.el-input__wrapper.is-focus) {
    box-shadow: 0 0 0 1px #5463ff inset !important;
  }
  
  // 单选框样式
  :deep(.custom-radio-group) {
    display: flex;
    gap: 30px;
  }
  
  :deep(.custom-radio) {
    margin-right: 0;
    
    .el-radio__input {
      .el-radio__inner {
        width: 18px;
        height: 18px;
        border: 2px solid #dcdfe6;
        border-radius: 50%;
        
        &:hover {
          border-color: #5463ff;
        }
      }
      
      &.is-checked .el-radio__inner {
        background-color: #5463ff;
        border-color: #5463ff;
        
        &::after {
          width: 6px;
          height: 6px;
          background-color: #fff;
        }
      }
    }
    
    .el-radio__label {
      font-size: 16px;
      color: #333;
      padding-left: 8px;
    }
  }
</style>
